<template>
  <div class="ordersList">

    <div class="content">
      <el-row>
        <div class="debug">{{vm.query}}{{vm.meta}}</div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>订单列表</el-breadcrumb-item>

        </el-breadcrumb>

      </el-row>
      <el-row :gutter="12">
        <!--todo 响应式-->
        <el-col :span="16">

          <el-select style="width:100px" size="small" v-model="vm.query.state" placeholder="全部状态">
            <el-option label="待收首付" value="1"></el-option>
            <el-option label="已收首付" value="0"></el-option>
          </el-select>
          <!--<el-select style="width:100px" size="small" v-model="vm.query.state" placeholder="全部合作商">-->
          <!--<el-option label="合作商1" value="1"></el-option>-->
          <!--<el-option label="合作商2" value="0"></el-option>-->
        <!--</el-select>-->
          <el-select @change="query" style="width:100px" size="small" v-model="vm.query.shop_id" placeholder="选择店铺">
            <el-option
              v-for="item in shops"
              :key="item.id"
              :label="item.shop_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-input size="small" placeholder="按关键词进行搜索" v-model="vm.query.keyword" class="input-with-select">
            <el-button size="small" @click="query()" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3" :offset="5">




        </el-col>
      </el-row>

      <el-table
        :data="vm.models" stripe border style="width: 100%">


        <el-table-column

          prop="id"
          label="#"
          width="60">
        </el-table-column>
        <el-table-column

          prop="create_time"
          label="订单时间"
          >
        </el-table-column>
        <el-table-column
          prop="thread_name"
          label="客户姓名"
          >
        </el-table-column>
        <el-table-column
          prop="thread_phone"
          label="客户电话"


          >

        </el-table-column>
        <el-table-column
        prop="model_name"
        label="购买车型"


        >

      </el-table-column>
        <el-table-column
        prop="wxapp_name"
        label="所属合作商"


        >

      </el-table-column>
        <el-table-column
          prop="shop_name"
          label="店铺名称"


          >

        </el-table-column>
        <el-table-column
        prop="sales_name"
        label="销售顾问"


        >

      </el-table-column>
        <el-table-column
          prop="sales_phone"
          label="销售电话"


          >

        </el-table-column>
        <!--<el-table-column-->
        <!--label="状态">-->
        <!--<template slot-scope="scope">-->

        <!--<div v-if="scope.row.service_charge_accept==1">通过</div>-->
        <!--<div v-if="scope.row.service_charge_accept==0">未通过</div>-->

        <!--&lt;!&ndash;<div v-if="scope.row.formalities_delay_days&&scope.row.formalities_delay_days>0">手续延迟{{scope.row.formalities_delay_days}}天</div>&ndash;&gt;-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column
          prop="first_payment"
          label="首付">
          <template slot-scope="scope">
            <div v-if="scope.row.first_payment_accept>0">已付首付</div>
            <div v-else>未付首付</div>

            <!--<div v-if="scope.row.service_charge_accept==1">通过</div>-->
            <!--<div v-if="scope.row.service_charge_accept==0">未通过</div>-->

            <!--&lt;!&ndash;<div v-if="scope.row.formalities_delay_days&&scope.row.formalities_delay_days>0">手续延迟{{scope.row.formalities_delay_days}}天</div>&ndash;&gt;-->
          </template>
        </el-table-column>
        <!--<el-table-column-->
          <!--align="right"-->
          <!--label="操作"-->
          <!--&gt;-->
          <!--<template slot-scope="scope">-->
            <!--<el-button-->
              <!--v-if="scope.row.status==enable"-->
              <!--type="success"-->
              <!--size="mini">-->
              <!--<i class="el-icon-success"></i>-->
            <!--</el-button>-->
            <!--<el-button-->
              <!--v-if="scope.row.status==disable"-->
              <!--type="warning"-->
              <!--size="mini">-->
              <!--<i class="el-icon-error"></i>-->

            <!--</el-button>-->
            <!--<router-link :to="{ name:'staffEdit',params: { id: scope.row.id }}" append>-->
              <!--<el-button size="mini">-->

                <!--编辑-->
              <!--</el-button>-->
            <!--</router-link>-->

            <!--<el-button-->
              <!--@click="delUser"-->
              <!--size="mini"-->
              <!--type="danger">-->
              <!--删除-->
            <!--</el-button>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :current-page="vm.meta.page"
        layout="total,prev, pager, next,jumper"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import * as Models from "@/api/orders";
import * as Shops from "@/api/shops";

export default {
  name: "ordersList",
  computed: {},

  components: {},
  data() {
    return {
      vm: {
        models: [],
        isNull: false,
        isLoading: false,
        isError: false,
        meta: {},
        query: {}
      },
      shops: []
    };
  },
  computed: {},
  mounted() {
    var that = this;
    this.query({ reload: true });
    // Shops.query().then(function(res) {
    //   that.shops = res.pass_list;
    // });
  },
  methods: {
    query: function(config) {
      var that = this;

      if (config && config.reload) {
      }
      that.vm.models = [];
      that.vm.isLoading = true;
      Models.query(that.vm.query)
        .then(function(data) {
          that.vm.isLoading = false;
          console.log(data);
          if (data.meta) {
            that.vm.meta = {
              size: data.meta.size * 1,
              page: data.meta.page * 1,
              total: data.meta.total * 1
            };
          }

          that.vm.models = data.models;
          //
          //          that.$refs['staffTable'].doLayout();
        })
        .catch(function() {
          that.vm.isLoading = false;
          that.vm.isError = true;
        });
      //      todo 双向绑定底层方法优化性能 -> set
    },
    pageChange: function(e) {
      Vue.set(this.vm.query, "page", e);
      this.query({ reload: true });
    }
  }
};
</script>
